<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	div,img{
		width: 200px;
		height: 150px;
	}
	img{
		display: none;    /*脱离文档流          隐藏  */
	}
</style>
<script type="text/javascript">
		/*页面加载完成事件  */
		onload = function(){
			//取出第一张图片
			var img = document.getElementsByTagName("img")[0];
			//让图片显示
			img.style.display="inline-block";
		}
		
		
		
		var x = 1;
		//开启定时器
		setInterval(function(){
			var index = x++%3;
			console.log(index);
			//得到所有图片
			var arr = document.getElementsByTagName("img");
			//得到数据就遍历
			for(var i=0;i<arr.length;i++){
				arr[i].style.display = i===index? "inline-block":"none";
			}
		},1000)
</script>
</head>
<body>
	<div>
		<img alt="" src="../imgs/1.jpg">
		<img alt="" src="../imgs/2.jpg">
		<img alt="" src="../imgs/6.jpg">
	</div>
</body>
</html>